<template>
	<view class="container bg-white">
		
		<view class="personHead">
			<view class="personTable flex align-center">
				<image :src="userInfo.img_url" class="perImg"></image>
				<view class="margin-left">
					<view class="perText">{{userInfo.truename}}</view>
					<view class="perJsontext margin-top-xs">{{userInfo.province}} - {{userInfo.sale_title}}</view>
				</view>
			</view>
			<view class="bottomBox flex align-center justify-between">
				<image src="../../static/zlz.png" mode="widthFix" class="zlzImg"></image>
				<view class="BoxText">
					助力{{userInfo.province}}赢取人气冠军
				</view>
				<button class="BoxBtn" @click="goDetail" style="margin: 0;">
					邀请助力
				</button>
			</view>
		</view>	
		<view class="centerBox">
			
			<scroll-view class="scrollBox" scroll-y>
				<view style="position: relative;">
					<image :src="`../../static/cj${userInfo.luck_limit>0?'':2}.png`"  @click="getzj" mode="widthFix" class="margin-top"></image>
				</view>
				<view class="paddBox margin-top">
					<view class="BoxSecitem flex margin-bottom" v-for="(item,index) in zjList">
						<image src="../../static/lw.png" mode="widthFix" class="lwImg margin-top-xs"></image>
						<view class="flex align-center justify-between margin-left" style="flex: 1;">
							<view>
								<view class="zjText">中奖记录</view>
								<view class="zjContent margin-top-xs">{{item.title}}</view>
							</view>
							<view class="payBtn" :class="item.pay_status==0?'change':'bg-grey'" @click="confimPay(item)">{{item.pay_status==0?'去支付':'已支付'}}</view>
						</view>
					</view>
					<view class="aboutBox margin-tb">
						<image src="../../static/hdsm.png" mode="widthFix" class="hdimg"></image>
						①	吉利汽车营销一公司中部战区将在2月26日（元宵节）下午17:00在[吉利汽车营销一公司中部战区]官方抖音直播开箱，届时将利用抽奖软件随机分配300个吉盒号码，并现场开箱尾号为8的吉盒</br>
						②	未开箱吉盒，按照中奖者所抽取的对应编号吉盒进行邮寄</br>
						③	人气冠军省份额外奖励的60个吉盒，将由战区统一分配，为冠军省份发放奖励
					</view>				
				</view>
			</scroll-view>
		</view>
		<view class="cu-modal" :class="Isshow?'show':''" >
			<view class="cu-dialog" style="background: linear-gradient(-90deg, #F65C53 0%, #F64A43 100%);">
				<view class="bg-img" >
					<goldenEgg @changezj="changezj" v-if="Isshow"></goldenEgg>
				</view>
				<view class="cu-bar">
					<view class="action margin-0 flex-sub text-white  solid-left" @tap="hideModal">关闭</view>
				</view>
			</view>
		</view>
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
			<view class="gray-text">加载中...</view>
		</view>		
	</view>
</template>

<script>
	import { mapMutations , mapState } from 'vuex'
	import goldenEgg from "@/components/jbdu-golden_egg/goldenegg.vue";

	export default {
		components:{
			goldenEgg
		},
		data() {
			return {
				Isshow:false,
				cjShow:false,
				imgUrl:'/static/share.jpg',
				zjList:[],
				loading:false
			};
		},
		onLoad() {
			this.changeperson();
			this.getZjList()
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShareAppMessage:function(options){
			
		　　let that = this;
		　　// 设置转发内容
		　　let shareObj = {
		　　　　title:`助力${that.userInfo.province}赢取人气冠军`,
		　　　　path: `/pages/zhuli/index?zlid=${that.userInfo.zl_id}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　imageUrl:that.imgUrl, //转发时显示的图片路径，支持网络和本地，不传则使用当前页默认截图。
		　　　　success: function(res){　 // 转发成功之后的回调　　　　　
		　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
		　　　　　　}
		　　　　},
		　　　　fail: function(){　// 转发失败之后的回调
		　　　　　　if(res.errMsg == 'shareAppMessage:fail cancel'){
		　　　　　　　　// 用户取消转发
		　　　　　　}else if(res.errMsg == 'shareAppMessage:fail'){
		　　　　　　　　// 转发失败，其中 detail message 为详细失败信息
		　　　　　　}
		　　　　},
		　　　　complete: function(){
		　　　　　　// 转发结束之后的回调（转发成不成功都会执行）
		　　　　}
		　　};
		　　// 来自页面内的按钮的转发
		　　if( options.from == 'button' ){
		　　　　var dataid = options.target.dataset; 
		　　}
		　　// 返回shareObj
		　　return shareObj;
		},			
		methods: {
			...mapMutations(['changeperson']),
			PickerChange(e) {
				this.index = e.detail.value
			},

			showModal(){
				this.Isshow = true
			},
			goDetail(){
				uni.navigateTo({
					url:`/pages/zhuli/index?zlid=${this.userInfo.zl_id}&isme=1`
				})
			},
			getzj(){
				this.$ComFunJS.ajax({
					method:'get',
					url:`/api/v1.0/draw/check`,
					success:(res)=>{
						if(res.data.error){
							this.showModal()
						}else{
							this.$api.msg(res.data.result)
						}
					}
				})
			},
			getZjList(){
				this.$ComFunJS.ajax({
					method:'get',
					url:`/api/v1.0/draw/list`,
					success:(res)=>{
						this.zjList = res.data.result
					}
				})				
			},
			//中奖次数
			changezj(){
				setTimeout(()=>{
					this.Isshow = false
					this.userInfo.luck_limit -=1;
					this.getZjList()
				},1000)
			},
			hideModal(){
				this.Isshow = false
			},
			//分享
			share(){
				this.$refs.share.toggleMask();	
			},
			//确认支付
			confimPay(item){
				let _this = this;
				if(item.type==1){
					return;
				}				
				if(_this.loading){
					return;
				}
				_this.loading=true;
				this.$ComFunJS.ajax({
					method:"post",
					url:"/api/v1.0/order/pay",
					data:{
						pay_type:"1",
						order_id:item.order_id,
					},
					success:(res)=>{
						_this.loading=false;
						if(!res.data.error){
						uni.requestPayment({
						  timeStamp: res.data.result.timeStamp,
						  nonceStr: res.data.result.nonceStr,
						  package: res.data.result.package,
						  signType: 'MD5',
						  paySign: res.data.result.paySign,
						  success(res) {
							_this.$api.msg("支付成功")
							_this.getZjList()
						  },
						  fail(res) {
							_this.$api.msg("支付失败，请重试")
						  }
						})
						}else{
							_this.$api.msg(res.data.error)
						}
					}	
				})					
			},			
		},

	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		height: 100%;
	}
	.scrollBox{
		height :calc(100% - 396upx)
	}
	.centerBox{
		padding-top: 396upx;
		
		.paddBox{
			padding: 0 30upx;
			
			.BoxSecitem{
				width: 100%;
				box-sizing: border-box;
				padding: 35upx;
				height: 152upx;
				background: #FFFFFF;
				box-shadow: 0px 4upx 21upx 0px rgba(251, 76, 60, 0.15);
				border-radius: 23upx;
				.lwImg{
					width: 27upx;
				}
				.zjText{
					font-size: 30upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}
				.zjContent{
					font-size: 26upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #777777;
				}
				.payBtn{
					width: 152upx;
					height: 46upx;
					
					border-radius: 23upx;
					line-height: 46upx;
					color: #FFFFFF;
					text-align: center;
					font-size: 26upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					&.change{
						background: linear-gradient(90deg, #F64C44 0%, #FF7D44 100%);
					}
				}
			}
			.aboutBox{
				background: #FFFFFF;
				border: 4upx solid #FFB0AB;
				position: relative;
				box-shadow: 0px 4upx 21upx 0px rgba(251, 76, 60, 0.03);
				border-radius: 16upx;
				box-sizing: border-box;
				padding: 77upx 43upx 43upx 43upx;
				font-size: 26upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #646464;
				line-height: 51upx;
				.hdimg{
					width: 278upx;
					position:absolute;
					top: -20upx;
					margin: 0 auto;
					left: 0;
					right: 0;
				}
			}
		}
	}
	.Imgtext{
		position: absolute;
	}
	.personHead{
		height: 396upx;
		position: fixed;
		overflow: hidden;
		top: 0;
		background: linear-gradient(-90deg, #F65C53 0%, #F64A43 100%);
		width: 100%;
		padding: 0 30upx;
		padding-top: 99upx;
		z-index: 999;
		.perImg{
			width: 136upx;
			height: 136upx;
			border-radius: 50%;
		}
		.perText{
			font-size: 36upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
		}
		.perJsontext{
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
		}
		.bottomBox{
			width: 690upx;
			height: 104upx;
			background: #FFF3ED;
			box-shadow: 0px 4upx 21upx 0px rgba(251, 76, 60, 0.03);
			border-radius: 16upx 16upx 0px 0px;
			position: absolute;
			bottom: 0;
			padding: 0 33upx;
			.BoxText{
				font-size: 26upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}
			.zlzImg{
				width: 165upx;
				position: absolute;
				left: 30upx;
				top: -25upx;
			}
			.BoxBtn{
				width: 170upx;
				height: 46upx;
				line-height: 46upx;
				font-size: 26upx;
				color: #fff;
				text-align: center;
				font-family: Microsoft YaHei;
				font-weight: 400;
				background: #FF8927;
				box-shadow: -2upx -2upx 5px 0px #FFA574, 3upx 8upx 13upx 0px rgba(254, 185, 123, 0.82);
				border-radius: 23upx;
			}
		}
	}
</style>
